<template>
    <div class="app-container">
        <levelbar></levelbar>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="提分分析漏斗" name="extract">
                <div v-if="activeName == 'extract'">
                    <extract-analysis></extract-analysis>
                </div>
            </el-tab-pane>
            <el-tab-pane label="布置作业漏斗" name="Job">
                <div v-if="activeName == 'Job'">
                    <job-hopper></job-hopper>
                </div>
            </el-tab-pane>
            <el-tab-pane label="积分商品转化分析" name="integr">
                <div v-if="activeName == 'integr'">
                    <integr-commodity></integr-commodity>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import Levelbar from '../../layout/Levelbar';
    import extractAnalysis from './comps/extractAnalysis';
    import jobHopper from './comps/jobHopper';
    import integrCommodity from './comps/integrCommodity';
    export default {
        name: 'funnelAnaly',
        components: {Levelbar, extractAnalysis, jobHopper, integrCommodity},
        data() {
            return {
                activeName: 'extract'
            };
        },
        computed: {
            
        },
        methods: {
            handleClick(tab, event) {
                this.activeName = tab.name;
            }
        }
    };
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
   .app-container{
        position: relative;
        padding: 20px 20px 10px;
        width: 1400px;
        margin: 0 auto;
    }
</style>
